<template>
    <view class="mySelect">
        <div class="mySelect_show">
            <view @tap="handleTap()" class="mySelect_l">{{lineSlect}}</view>
            <view @tap="handleTap()" class="mySelect_r iconfont">&#xe60c;</view>
        </div>
        <lbPicke ref="picker"
                 :searchShow="searchShow"
                 v-model="value"
                 mode="multiSelector"
                 :list="list"
                 :level="level"
                 confirmColor="#555"
                 @change="handleChange"
                 @confirm="handleConfirm"
                 @cancel="handleCancel">
        </lbPicke>
    </view>
</template>
<script>
  // 地区选择
  // <areaSelect />
  // import areaSelect from '../../components/formList/areaSelect'
  import lbPicke from './lb-picker/index'
  export default {
    components: {
      lbPicke
    },
    data() {
      return {
        name: '',
        lineSlect:'请选择',
        value: []
      }
    },
    props:{
      // 是否刷新
      resh:{
        default:()=>{
          return false
        }
      },
      isObj:{
        default:()=>{
          return false
        }
      },
      // 是否显示搜框
      searchShow:{
        default:()=>{
          return false
        }
      },
      outLineSlect:{
        default:()=>{
          return '请选择'
        }
      },
      list:{
        default:()=>{
          return ['1','n']
        }
      },
      level:{
        default:()=>{
          return 1
        }
      },
      code:{
        default:()=>{
          return ''
        }
      },
      val:{
        default:()=>{
          return ''
        }
      }
    },
    onLaunch(){
    },
    created() {
      this.strToVal(this.val)
    },
    onLoad() {
    },
    methods: {
      // str转val
      strToVal(areaStr){
        let areaArr=[]
        this.lineSlect=this.outLineSlect
        if (areaStr!=='') {
          this.lineSlect=areaStr
          this.list.map((val,index) => {
            if (val==areaStr) {
              this.value=index
            }
          })
          return this.value
        }
      },
      handleTap () {
        this.$refs['picker'].show()
      },
      handleChange (item) {
      },
      handleConfirm (item) {
        if (this.isObj) {
          this.lineSlect=item.item.map(val=>val.label).join(',')
          let idStr=item.item.map(val=>val.value).join(',')
          if (this.code==='') {
            this.$emit('selectValue',this.lineSlect)
          }else{
            this.$emit('selectValue',{value:this.lineSlect,code:this.code,idStr})
          }
        }else{
          this.lineSlect=item.item.join(',')
          this.$emit('selectValue',{value:this.lineSlect,code:this.code,})
        }
      },
      handleCancel (item) {
      },

    },
    watch:{
      val:{
        handler(val) {
          if (this.resh) {
            this.strToVal(val)
          }
        },
        immediate: true,
        deep: true
      }
    }

  }
</script>
<style lang="scss" scoped>
@import "scss/iconfont.css";
.mySelect{
  position: relative;
  width: 100%;
  .mySelect_show{
    display: flex;
    justify-content: space-between;
    align-content: center;
  }
  .mySelect_l{
    flex-shrink: 1;
    width: 100%;
  }
  .mySelect_r{
    flex-shrink: 0;
    font-size: 28rpx;
    line-height: 40rpx;
  }
}

</style>

